$(function () {

    function initForm() {
        let id = location.search.split("=")[1]

        $.ajax({
            method: 'GET',
            url: 'my/article/' + id,
            success: function (res) {
                // 渲染到form表单
                form.val("form-edit", res.data);
                tinyMCE.activeEditor.setContent(res.data.content);
            }


        })
    }


    // 1.渲染页面
    let form = layui.form
    let layer = layui.layer
    initCate();

    function initCate() {
        $.ajax({
            method: "GET",
            url: "/my/article/cates",
            success: function (res) {
                // console.log(res)
                if (res.status != 0) {

                    return layer.msg(res.message)
                }

                let htmlStr = template('tpl-cate', res);
                $("[name=cate_id]").html(htmlStr)
                // 调用分页
                form.render();
            }

        });
    }


    // 2.初始化富文本编辑器
    initEditor()

    // 3.实现基本裁剪效果：
    // 3.1. 初始化图片裁剪器
    var $image = $('#image')
    // 3.2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3.3. 初始化裁剪区域
    $image.cropper(options)

    // 4.点击选择图片
    $("#btnChooseImage").on('click', function () {
        $("#coverFile").click()
    });

    // 5.设置图片
    $("#coverFile").on('change', function (e) {
        let file = e.target.files[0];
        // 校验
        if (file == undefined) {
            render;
        }
        // 根据选择的文件，创建一个对应的 URL 地址：
        let newImgURL = URL.createObjectURL(file)
        // 先销毁旧的裁剪区域，再重新设置图片路径
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域
    })

    // 6.设置状态
    let state = '';
    $("#btnSave1").on('click', function () {
        let state = '已发布';
    });
    $("#btnSave2").on('click', function () {
        let state = '草稿';
    })

    // 7.发布
    $("#form-pub").on('submit', function (e) {
        e.preventDefault();
        let fd = new FormData(this);
        fd.append('state', state);

        // 放入图片
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                fd.append('cover_img', blob);
                // console.log(...fd);
                publishArticle(fd)
            });
    })

    function publishArticle(fd) {
        $.ajax({
            method: "POST",
            url: "my/article/add",
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {

                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg('恭喜你，修改文章成功')
                setTimeout(function () {

                    window.parent.document.getElementById('art_list').click()
                }, 3000)
            }
        })
    }

})